<template>
    <div id="goods">
       <!--顶部-->
        <div id="head">
            <div id="headImg">
                <img src="../image/goods/d4eca6c8dbf5506e.jpg" alt="">
            </div>
            <p>
                <span>1/</span>
                <span>6</span>
            </p>
        </div>
        <!--商品名称-->
        <div id="goodsName">
            <h1>好时 马来西亚进口 曲奇奶香白巧克力 146g</h1>
        </div>
        <!--价格和按钮-->
        <div id="PriceButtons">
            <div id="PriceButtonsBox">
                <p id="Buttons">
                    <span>￥19.8</span>
                </p>
                <p id="Price">
                    <span id="span1"></span>
                    <span id="num">1</span>
                    <span id="span2"></span>
                </p>                                        
            </div>
        </div>
        <!--活动满减-->
        <div id="activity">
            <div>
                <p>促销</p>
                <div id="activityRight">
                   <a href="">
                        <span>满30减5</span>
                        <span>好时满30减5，满60减15</span>
                        <span></span>
                   </a>
                </div>
            </div>
        </div>
        <div id="kb"></div>
        <!--店铺名称和联系-->
        <div id="merchants">
            <a href="">
                <i></i>
                <span>沃尔玛-新街口店</span>
            </a>
            <a href="">
                <i></i>
                <span>联系商家</span>
            </a>
        </div>
        <!--评价-->
        <div id="evaluation">
            <div>
                <p>
                    <span>商品评价</span>
                    <span>(共1人评价)</span>
                </p>
                <div>
                    <span></span>
                    <span></span>
                    <span>好评100%</span>
                </div>
            </div>
        </div>
        <!--商品详情-->
        <div id="details">
            <span>商品详情</span>
        </div>
        <!--图片部分-->
        <div id="goodsImg">
            <div>
                <div>
                    <img src="../image/goods/80606998507d4d04.jpg" alt="">
                    <img src="../image/goods/4a8832463873954a.jpg" alt="">
                </div>
                <div>
                    <p>价格说明</p>
                    <p>
                        <strong>划线价格: </strong>
                        <span> 划线的价格并非《中华人民共和国价格法》及《禁止价格欺诈行为的规定》等相关法律法规中所指商品“原价”的含义，仅为到家平台商家处商品的供应商指导价或建议零售价， </span>
                        <strong> 并非商品原价。</strong>
                    </p>
                    <p>
                        <strong>未划线价格：</strong>
                        <span>未划线的价格指该商家处商品在京东到家平台实时标价，具体成交价格根据商品参加的活动，或者您使用优惠券等发生变化，最终以订单结算页面价格为准。</span>
                    </p>
                </div>
            </div>
        </div>
        <Car :shopid="shop_id" active="img_id"></Car>
        <SideNavigation></SideNavigation>
    </div>
</template>
<script>
    import Car from '@/components/Car';
    export default {
        props:['shop_id','img_id'],
        components:{Car},
    }
</script>
<style scoped lang="scss">
//单个店铺里的商品详情
*{
    margin:0;
    padding:0;
    list-style-type:none;
    text-decoration:none;
}
#goods{
    width:100%;

//顶部
    #head{
        width:750px;
        height:750px;
        position: relative;
        //顶部图片
        #headImg{
            width:750px;
            height:750px;

            img{
                width:750px;
                height:750px;
                background-repeat:no-repeat;
                background-size:100% 100%;
            }
        }
        //图片下的数量
        p{
            width:100px;
            height:48px;
            background-color:rgba(0,0,0,0.4);
            border-radius:50px;
            display:flex;
            position: absolute;
            right:20px;
            bottom:20px;

            span{
                color:#fff;
                display:block;
                height:45px;
            }
            span:nth-of-type(1){
                font-size:38px;
                width:60px;
                text-align:right;
                line-height:45px;
            }
            span:nth-of-type(2){
                font-size:32px;
                width:30px;                
                text-align:left;
                line-height:48px;
            } 
        }
    }
//商品名称
    #goodsName{
        width:750px;
        height:78px;
        white-space:nowrap;
        h1{
            width:710px;
            height:48px;
            margin:20px 20px 10px 20px;
            text-align:center;
            font-size:36px;
            line-height:48px;
        }
    }
//价格和按钮
    #PriceButtons{
        width:750px;
        height:78px;
        
       #PriceButtonsBox{
            width:730px;
            height:44px;
            padding-left:20px;
            display:flex;
            justify-content:space-between;

           #Buttons{
               width:94px;
               height:60px;
               font-size:36px;
               color:#ff3434;
               line-height:60px;
           }
           #Price{
                width:200px;
                height:56px;
                display:flex;

                //左边减的按钮
                #span1{
                    display:block;
                    width:56px;
                    height:56px;                                       
                    background-image:url(../image/store/addNumSprite.png);
                    background-position:-84px 0;
                    background-repeat:no-repeat;
                    background-size:400% 100%; 
                }
                //中间的数量
                #num{
                    font-size:60px;
                    width:60px;
                    height:56px;
                    display:block;
                    text-align:center;
                    line-height:56px;
                    font-size:30px;
                    color:#333;
                }
                //右边加的按钮
                 #span2{
                    display:block;
                    width:56px;
                    height:56px;
                    background-image:url(../image/store/addNumSprite.png);
                    background-repeat:no-repeat;
                    background-size:400% 100%;
                }
            }
        } 
    }
//活动满减
    #activity{
        width:750px;
        height:100px;
        white-space:nowrap;

        div{
          width:730px;
          height:100px;
          margin-left:20px;
          border-top:1px solid rgba(0,0,0,0.1);
          display:flex;  
        //最左边促销
            p{
              width:84px;
              height:100px;
              padding-left:10px;
              font-size:24px;
              color:#999;
              line-height:100px; 
            }
        //右边的盒子   
            #activityRight{
                width: 636px;
                height:100px;
                
              a{
                width:639px;
                height:40px;
                line-height:40px;
                margin:auto;
                display:flex;

                span{
                    display:block;
                    font-size:24px;
                }
                //绿色的满减
                span:nth-of-type(1){                   
                    width:100px;
                    height:28px;
                    padding:0 6px;
                    margin:5px 6px 0 0;
                    background-color:#55D85E;
                    color:#fff;
                    text-align:center;
                    line-height:26px;
                    border-radius:8px 2px;                    
                }
                //满减
                span:nth-of-type(2){
                    width:458px;
                    height:40px;                   
                    color:#555;
                }
                //右箭头
                span:nth-of-type(3){
                    width:32px;
                    height:40px;
                    margin-left:20px;
                    background-image:url(../image/goods/good_Detail_Icon.png);
                    background-position:-294px 9px;
                    background-repeat:no-repeat;
                    background-size:400px 300px;
                }
              }
            }
        }
    }
//分割线
    #kb{
        width:750px;
        height:20px;
        background-color:#eee;
    }
//店铺名称和联系
    #merchants{
        width:750px;
        height:100px;
        margin-top:20px;
        display:flex;
        white-space:nowrap;

        //图片和文字的共同代码
        a{
            height:100px;
            display:block;
            display:flex;

            //图片
            i{
                display:block;
                height:45px;
                
                background-repeat:no-repeat;               
            }
            //文字
            span{
                display:block;
                height:50px;
                font-size:28px;
                color:#333;
                line-height:50px;
                margin-top:25px;
            }
        }
        
        //左边
        a:nth-of-type(1){
            width:468px;           
            padding-left:20px;

            i{               
                width:45px;
                background-position:center center;
                background-image:url(../image/home/index_moreStore.png);
                background-size:28px auto;
                margin-top:25px;
            }
            span{               
                width:430px;
                border-right:1px solid #999;           
            }

        }
        //右边
        a:nth-of-type(2){            
            width:242px;
            
            padding-right:20px;

            i{
                width:40px;                
                margin:25px 0 0 50px;                
                background-position: -50px 9px;
                background-image:url(../image/goods/good_Detail_Icon.png);
                background-size:400px 300px;
            }
            span{
                width:120px;
                text-align:right;
            }
        }
    }
//评价
    #evaluation{
        width:710px;
        height:168px;
        padding:0 20px;
        white-space:nowrap;

        div{
            width:710px;
            height:168px;
            margin:auto;
            
            //上面商品评价和评价数量
            p{
                display:flex;
                width:710px;
                height:102px;

                span{
                    display:block;
                    height:102px;
                    line-height:102px;
                }
                span:nth-of-type(1){
                    font-size:30px;
                    color:#333;                   
                    letter-spacing:1px;
                }
                span:nth-of-type(2){
                    font-size:24px;
                    color:#999;
                    margin-left:5px;
                }
            }
            //下面的好评线
            div{
                width:710px;
                height:6px;
                padding-bottom:40px;
                margin-top:20px;
                display:flex;
                position: relative;

                span:nth-of-type(1){
                    display:block;
                    width:570px;
                    height:6px;
                    background-color:#47b34f;
                    border-radius:5px; 
                }
                span:nth-of-type(2){
                    display:block;
                    width:14px;
                    height:14px;
                    border:3px solid #47b34f;
                    border-radius:50px;
                    position:absolute;
                    top:-7px;
                    left:568px;
                }
                span:nth-of-type(3){
                    display:block;
                    width:112px;
                    height:100px;
                    font-size:24px;
                    color:#47b34f;
                    text-align:center;
                    position:absolute;
                    left:598px;
                    top:-12px;
                }
            }
        }
    }
//商品详情
    #details{
        width:750px;
        height:100px;

        span{
            display:block;
            width:710px;
            height:100px;
            padding:0 20px;
            font-size:30px;
            color:#333;
            line-height:100px;
        }
    }
//商品图片
    #goodsImg{
        width:750px;

        div{
            width:710px;
            margin:auto;

            div:nth-of-type(1){
                width:710px;
                height:158px;

                img:nth-of-type(1){
                    width:710px;
                    height:60px;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
                img:nth-of-type(2){
                    width:710px;
                    height:96px;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
            }
            div:nth-of-type(2){
                width:710px;
                height:320px;
                margin-top:20px;

                //价格说明
                p{
                    width:710px;

                    strong{//划线价格
                        font-size:24px;
                        color:#222;
                    }
                    span{//详细文字
                        font-size:24px;
                        color:#666;
                        line-height:30px;
                         
                    }
                }
                p:nth-of-type(1){                    
                    height:42px;
                    margin-bottom:20px;
                    font-size:30px;
                    color:#333;
                    line-height:42px;
                }
                p:nth-of-type(2){
                    height:136px;
                    margin-bottom:20px;
                }
                p:nth-of-type(3){
                    height:120px;
                }
            }
        }
    }
}
</style>


